<script setup>
import { ref,watch } from 'vue'
import * as admin from '@/api/indexdata.js'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute()
const jindianId = route.query.jindianId

const jindianData = ref({})
const tuijian = ref([])
const jinquid = ref()

const findTuijian = async () => {
  const param = {
    jinquId: jinquid.value
  }
  const res = await admin.recommendJindian(param)
  tuijian.value = res.data
}

const findData = async () => {
  const param = {
    id: jindianId
  }
  const res = await admin.articleJindianListService(param)
  jindianData.value = res.data[0]
  jinquid.value = res.data[0].jinquId
  findTuijian()
}
const goToJindianData = (id) => {
  // 跳转到景点详情页面
  router.push({ path: '/indexJindianData', query: { jindianId: id } }).then(() => {
    window.location.reload()  // 强制浏览器刷新整个页面
  })
};


findData()
</script>

<template>
  <div class="jindian-detail">
    <div class="content-wrapper">
      <el-card shadow="hover" class="main-card">
        <h1 class="title">{{ jindianData.name }}</h1>

        <div class="media">
          <el-image
            v-if="jindianData.img"
            :src="jindianData.img"
            fit="cover"
            class="media-image"
          />
          <video
            v-if="jindianData.video"
            :src="jindianData.video"
            controls
            class="media-video"
          />
        </div>

        <el-descriptions title="景点信息" :column="2" border style="margin-top: 24px">
          <el-descriptions-item label="景点名称">{{ jindianData.name }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ jindianData.address }}</el-descriptions-item>
          <!-- <el-descriptions-item label="门票价格">{{ jindianData.price }} 元</el-descriptions-item> -->
          <el-descriptions-item label="创建时间">{{ jindianData.createTime }}</el-descriptions-item>
          <el-descriptions-item label="景区别名">{{ jindianData.jindianName }}</el-descriptions-item>
        </el-descriptions>

        <el-card style="margin-top: 20px">
          <h3>景点描述</h3>
          <p>{{ jindianData.content }}</p>
        </el-card>

        <el-card style="margin-top: 20px">
          <h3>历史背景</h3>
          <p>{{ jindianData.background }}</p>
        </el-card>
      </el-card>

      <!-- 推荐景点 -->
      <el-card class="recommend-card" v-if="tuijian.length > 0">
        <h3>相关推荐</h3>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in tuijian" :key="item.id">
            <el-card :body-style="{ padding: '12px' }" @click="goToJindianData(item.id)">
              <el-image :src="item.img" style="width: 100%; height: 160px; object-fit: cover" />
              <div style="margin-top: 10px">
                <h4>{{ item.name }}</h4>
                <p style="color: gray">{{ item.address }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.jindian-detail {
  padding: 24px;
  background-color: #f9fafc;
}

.content-wrapper {
  max-width: 80%;
  margin: 0 auto;
}

.title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 12px;
}

.media {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.media-image,
.media-video {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.recommend-card {
  margin-top: 40px;
}
</style>
